<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多列布局的学习</title>
    <!-- 将元素的内容自动分割为指定数量的垂直列
    场景：1.长文章分栏，中间有间隙，也可以做响应式；
          2.图片的瀑布流
    与flex和grid布局的区别是，不用给每列一个新的盒子 -->
          
    <style>
        * {
            box-sizing: border-box;
            margin: 0%;
            padding: 0%;
        }

        html,body {
            height: 200%;
            width: 80%;
        }

        #main-body {
            max-width: 1200px;
            border: 1px pink solid;
            margin: 20px auto;
            /* column-count，根据容器的宽度和column-court值，自动分配列宽 */
            column-count: 4;
            /* column-gap，列之间的间距 */
            column-gap: 20px;
            /* column-rule，列之间的分割线样式 */
            column-rule: 2px red dashed;

            /* 注意：底部盒子会出现被切割的问题，原因是column-count的本质是将内容按垂直方向自动分割开（类似于纸质排版） */
        }

        .smallBox {
            /* 会将元素的内容自动分割为指定数量的垂直列，因此并未设置长度 */
            height: 150px;
            background-color: antiquewhite;
            margin-bottom: 20px;
            /* 不允许盒子被切割 */
            break-inside: avoid-column;
        }

        .smallBox:nth-child(2) {
            height: 300px;
        }
        
    </style>
</head>
<body>
    <main id="main-body">
        <div class="smallBox">1</div>
        <div class="smallBox">1</div>
        <div class="smallBox">1</div>
        <div class="smallBox">1</div>
        <div class="smallBox">1</div>
        <div class="smallBox">1</div>
        <div class="smallBox">1</div>
        <div class="smallBox">1</div>
        <div class="smallBox">1</div>
        <div class="smallBox">1</div>
        <div class="smallBox">1</div>
        <div class="smallBox">1</div>
        <div class="smallBox">1</div>
        <div class="smallBox">1</div>
        <div class="smallBox">1</div>
        <div class="smallBox">1</div>
        <div class="smallBox">1</div>
    </main>
</body>
</html>